<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="preview/css/reset.css"/>
    <script src="preview/js/jquery-3.2.1.min.js"></script>
    <script src="preview/js/countUp.js"></script>
    <script src="preview/js/echarts.min.js"></script>
    <title>歌德电子借阅机图书下载量</title>
    <style>
        .come{
            width:10.8rem;
            height: auto;
            font-size:0.24rem;
            /*background-color: #163a72;*/
        }
        .radar_box{
            position: relative;
        }

    </style>
</head>
<body>
<div class="come">
    <!--<div class="module-title ycenterbox"><img src="preview/img/listimg.png" /><span class="section_name" data-key="came_count_str">歌德电子借阅机图书下载量</span></div>-->
    <div class="bot_title five_title xycenterbox">
        <img src="preview/img/no3.png" alt="" class=""/>
        <p class="p1">歌德电子借阅机图书下载量&nbsp;</p>
    </div>
    <div class="five_title_bot">
        <p class="p2" style="margin-top:0.1rem;"><span class="download_txt">(下载总量:<span class="download_num">1458699</span></span>&nbsp;数组自<span class="year">2016</span>年<span class="year">1</span>月<span class="year">1</span>日起)</p>
    </div>
    <div class="radar_box">
        <div id="radar" style="width: 100%;height:5.8rem;"></div>
    </div>
</div>
</body>
<script>
    var option,radarChart,chart_timer=null,currentSize,waitCountNum=0;

    function getRem(prem, pwidth) {
        var html = document.getElementsByTagName("html")[0];
        var oWidth = $(window).width()||document.body.clientWidth || document.documentElement.clientWidth;
        html.style.fontSize = oWidth / pwidth * prem + "px";
        return oWidth / pwidth * prem;
    }
    function createCanvas(){
         option = {
            animationDuration:2000,
            animationEasing: 'cubicInOut',
            animationDurationUpdate:2000,
            animationEasingUpdate: 'cubicInOut',
            radar: {
                min: 0,
                max: 10000,
//                interval:7,
                shape: 'polygon',//雷达图绘制类型 polygon 多边形 circle 圆形
                //center:['50%','50%'],//位置
                //radius:'50%',//半径
                startAngle :90,//起始角度
                nameGap :15,//名称和指示器轴的距离
                //splitNumber :6,//分割段数
                splitArea: {//背景分割区域
                    areaStyle: {
                        //color: ['rgba(69,142,223,0.4)','rgba(69,142,223,0.4)','rgba(60,139,226,0.4)','rgba(46,132,227,0.4)','rgba(34,125,227,0.4)', 'rgba(22,126,242,0.4)'],
                        //color: ['#5396e0','#458edf','#3c8be2','#2e84e3','#227de3', '#167ef2'],
                        color: ['rgba(83,150,224,0.6)','rgba(69,142,223,0.5)','rgba(60,139,226,0.4)','rgba(46,132,227,0.3)','rgba(34,125,227,0.2)', 'rgba(22,126,242,0.1)'],
                    },
                },
                indicator: [//雷达图的指示器，用来指定雷达图中的多个变量（维度）
                    { name: '平桥乡', max: 10000, axisLabel: {show: false,showMinLabel:true,showMaxLabel:true,}},
                    { name: '分路口镇', max: 10000},
                    { name: '苏埠镇', max: 10000},
                    { name: '南楼村农家书屋', max: 10000},
                    { name: '单王乡', max: 10000},
                    { name: '韩摆渡镇', max: 10000},
                    { name: '独山镇', max: 10000},
                    { name: '江家店镇', max: 10000},
                    { name: '青山乡', max: 10000},
                    { name: '狮子岗乡', max: 10000},
                    { name: '顺河镇', max: 10000},
                    { name: '罗集乡', max: 10000},
                    { name: '石板冲乡', max: 10000},
                    { name: '固镇镇', max: 10000},
                    { name: '石婆店镇', max: 10000},
                    { name: '新安镇', max: 10000},
                    { name: '西市街道', max: 10000},
                    { name: '城南镇', max: 10000},
                    { name: '西河口乡', max: 10000},
                    { name: '丁集镇', max: 10000},
                    { name: '鼓楼街道', max: 10000},
                    { name: '徐集镇', max: 10000},
                    { name: '小华山街道', max: 10000},

                ],
                name: {
                    show: true,
                    formatter: null,
                    //padding: [3, 4, 5, 6],
                    textStyle: {
                        //设置indicator指示器字体颜色
                        color: '#1981ff',
//                        color:"#a1adcf",
                        fontSize:16*currentSize/100,
                    }
                },
                axisLabel: {
                    textStyle: {
                        fontSize: 16*currentSize/100,
                        color:'#add4f9'
                    },
                    inside:true,///刻度标签朝内还是朝外
                    //margin:12,///刻度标签距离坐标轴的距离
                    align:'right',///控制外圈文字的显示水平对齐
                    verticalAlign:'top',///控制外圈文字的显示垂直对齐
                    //minInterval : 1,


                },
                axisLine: {////设置x轴线的颜色
                    lineStyle: {
                        color: '#5587bd'
                    }
                },
                splitLine: {////设置每环的边框线的颜色
                    lineStyle: {
                        color: '#4c89cd'
                    }
                },
            },

            series: [{
                name: '',
                type: 'radar',
                itemStyle: {
                    normal:{
                        color:'#fff',
                        borderWidth:5,
                        symbol: "emptyCircle",
                        //borderType:'dashed',
                        //shadowColor: 'red',
                        //shadowBlur: 10,
                        opacity:1,
                        label: {//以下为是否显示，显示位置和显示格式的设置了
                            show: true,
                            position: 'right',
                            formatter: '{c}',
                            // formatter: '{b}\n{c}'
                            textStyle:{
                                fontSize:12,
                                color:"#add4f9"
                            }

                        },

                    },
                    //emphasis:{
                    //    color:'red',
                    //    borderWidth:16
                    //},
                    //areaStyle: {
                    //    normal: {
                    //        opacity: 100,
                    //        color:'red'
                    //    }
                    //}

                },//拐点样式
                lineStyle: {normal: {color:'#fff',width:1}},//折线样式
                data : [
                    {
                        value : [7200, 4000, 6000, 8000, 8000, 8000,7560,6932,4568,5698,6523,7563,8563,9563,3563,4563,2786,5636,4896,3012,6987,5698,7777],
                        name : '预算分配（Allocated Budget）'
                    }
                ],
            }]
        };
        radarChart = echarts.init(document.getElementById('radar'));
        radarChart.setOption(option);
    }

    window.onresize = function(){
        currentSize=getRem(100,1080);
        init();
        radarChart.resize();

    };
    window.onload = function(){
        currentSize=getRem(100,1080);
        init();
        waitTime();
    };
    function waitTime(){
        if(!!window.chart_timer)	cancelAnimationFrame(window.chart_timer);
        if(waitCountNum >= 900){///15秒重复一次动效
            waitCountNum = 0;
            init();
        }
        waitCountNum++;
        window.chart_timer = requestAnimationFrame(waitTime);
    }
    function init(){
        if(!!radarChart){
            radarChart.dispose();
        }
        createCanvas();
    }
</script>
</html>